<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  input{
    width:40px;
    text-align: center;
  }
  .num{
    width: 250px;
    margin: 0 auto;
  }
</style>
<body>
  <div class="num">
    <input type="text" class="inp1">+<input type="text" class="inp2">=<span class="numVal">?</span>
<button class="getSumBtn">求和</button>
<button class="clearBtn">清空</button>
  </div>
</body>
<script>
  var inp1=document.querySelector('.inp1')
  var inp2=document.querySelector('.inp2')
  var getSumBtn=document.querySelector('.getSumBtn')
  var numVal=document.querySelector('.numVal')
  var clearBtn=document.querySelector('.clearBtn')
  function getSum(inp1,inp2){
    var inp1Val=inp1.value
    var inp2Val=inp2.value
    var sum=0
    sum+=parseInt(inp1Val)+parseInt(inp2Val)
    numVal.innerHTML=sum
  }
  getSumBtn.onclick=function(){
    getSum(inp1,inp2)
    
  }
  clearBtn.onclick=function(){
    inp1.value=""
  inp2.value=""
  numVal.innerHTML=""
  }
  
</script>
</html>